<template>
	<view>
		<image src="/static/common/bg1.png" class="pagebg1" mode=""></image>
		<u-navbar :safeAreaInsetTop="true" leftIcon=" " :autoBack="false" :bgColor="'rgba(255,255,255,'+opc+')'"
			placeholder>
			<view class="headtab" slot="center">
				<u-tabs :list="list4" lineWidth="38rpx" lineColor="#E3432D" lineHeight='9rpx' :activeStyle="{
				            color: '#E3432D',
				            fontWeight: 'bold',
				            transform: 'scale(1.05)'
				        }" :inactiveStyle="{
				            color: '#101010',
				            transform: 'scale(1)'
				        }" itemStyle="padding-left: 28rpx; padding-right: 28rpx; height: 58rpx;font-size:31rpx;" @click="click">
				
				</u-tabs>
				<image src="/static/cao/souso.png" style="width: 38rpx;height: 38rpx;" mode=""></image>
			</view>
		</u-navbar>
		<view class="pagecon">
			<view class="con">
				<u-swiper :list="list1" height="203rpx" radius="30rpx" bgColor="transparent"></u-swiper>
				<view class="" v-if="tabcur==2">
					<u-sticky customNavHeight="44" :offsetTop="$u.addUnit($u.sys().statusBarHeight,'px')">
						<view class="tab" :style="{background:'rgba(255,255,255,'+opc+')',}">
							<view class="tab__item" v-for="(item,index) in list2" :key="index" :class="cur==index?'active':''" @click="cur=index">
								{{item.text}}
							</view>
						</view>
					</u-sticky>
					<view class="">
						<postitem v-for="(item,index) in postlist" :key="index" :item="item"></postitem>
					</view>
				</view>
				<view class="u-flex u-flex-y-center u-flex-between u-flex-wrap" v-if="tabcur==0">
					<videoitem :ctype="1" v-for="(item,index) in 6" :key="index"></videoitem>
				</view>
				<view class="u-flex u-flex-y-center u-flex-between u-flex-wrap" v-if="tabcur==1">
					<videoitem :ctype="0" v-for="(item,index) in 6" :key="index"></videoitem>
				</view>
			</view>
		</view>


		<tabbar :current="1"></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				postlist:[
					{pics:['/static/cao/pic.png']},
					{pics:['/static/cao/pic.png','/static/cao/pic.png']},
					{pics:['/static/cao/pic.png','/static/cao/pic.png','/static/cao/pic.png']},
				],
				opc: 0,
				list4: [{
					name: '短视频',
				}, {
					name: '直播',
				}, {
					name: '帖子'
				}, ],
				list1: [
					'/static/cao/banner.png'
				],
				list2:[
					{text:'推荐',},
					{text:'关注',},
					
				],
				cur:0,
				tabcur:0,
				opc1:0
			};
		},
		onLoad() {
			uni.hideTabBar()
		},
		onPageScroll(e) {
			if(e.scrollTop==0){
				this.opc=0
			}else{
				this.opc=1
			}
		},
		methods:{
			click(e){
				this.tabcur=e.index
			}
		}
	}
</script>

<style lang="scss">
.headtab{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 36rpx 0 10rpx;
	width: 704rpx;
}
.con{
	padding:20rpx 30rpx;
	.tab{
		display: flex;
		align-items: center;
		width: 690rpx;
		margin-left: -30rpx;
		padding: 0 30rpx;
		height: 84rpx;
		&__item{
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #010101;
			line-height: 30rpx;
			margin-right: 50rpx;
		}
		.active{
			font-weight: 800;
			font-size: 32rpx;
			color: #E3432D;
		}
	}
}
</style>